<template>
    <div class="doingObject">
        <div class="crumbs">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item> <i class="el-icon-folder" style="margin-right:10px"></i>项目部管理 </el-breadcrumb-item>
                <el-breadcrumb-item>进行中的项目</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" v-if="types == 0 || types == 1 || types == 2 || types == 4 || types == 'null'">
            <div class="handle-box">
                <!-- <el-button
                    type="primary"
                    icon="el-icon-delete"
                    class="handle-del mr10"
                    @click="delAllSelection"
                >批量删除</el-button>-->
                <div class="title" style>进行中的项目</div>

                <div>
                    <el-button type="primary" class="titleBtn1" style="width:60px;" @click="tableToExcel">导出</el-button>
                </div>

                <div class="prjectName mr20" style="padding-left:20px;">
                    <span class="name">项目名称</span>
                    <el-input class="handle-select mr10" v-model="query.projectname" placeholder="请输入"></el-input>
                </div>
                <div class="prjectName mr20">
                    <span class="name">项目类型</span>
                    <el-cascader
                        class="handle-select mr10"
                        v-model="category"
                        :options="options"
                        :props="{ expandTrigger: 'hover' }"
                        @change="handleChange"
                    ></el-cascader>
                </div>
                <div class="department mr0">
                    <span class="name">所属事业部</span>
                    <el-select v-model="value1" placeholder="请选择" @change="getSelectedDep" class="handle-select mr10">
                        <el-option v-for="item in depOptions" :key="item.deptid" :label="item.deptname" :value="item.deptid"></el-option>
                    </el-select>
                </div>
                <div class="stateTime mr20" style="margin-right:0px;">
                    <span class="name">开始时间</span>
                    <el-date-picker
                        class="handle-select"
                        v-model="query.startdate"
                        type="date"
                        placeholder="请选择"
                        value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </div>
                <div class="stateTime mr20" style="margin-right:0px;">
                    <span class="name">结束时间</span>
                    <el-date-picker
                        class="handle-select"
                        v-model="query.enddate"
                        type="date"
                        placeholder="请选择"
                        value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </div>
                <div class="searchBox">
                    <!-- <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input> -->
                    <el-button class="titleBtn" type="primary" style="width:60px;" @click="handleSearch">查询</el-button>
                    <el-button class="titleBtn1" type="primary" style="width:60px" @click="reset">重置</el-button>
                </div>
            </div>
            <div>
                <el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header">
                    <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                    <el-table-column label="序号" width="55" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
                    </el-table-column>
                    <el-table-column prop="projectid" label="项目ID" :show-overflow-tooltip="true" align="center"></el-table-column>
                    <el-table-column
                        prop="projectname"
                        label="项目名称"
                        width="150px"
                        :show-overflow-tooltip="true"
                        align="center"
                    ></el-table-column>

                    <el-table-column label="合同总产值" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.contractvalue }}万</template>
                    </el-table-column>
                    <el-table-column prop="deptname" label="所属事业部" :show-overflow-tooltip="true" align="center"></el-table-column>
                    <el-table-column prop="startdate" label="开工时间" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="period" label="工期" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.period }}个月</template>
                    </el-table-column>
                    <el-table-column prop="userid" label="关联用户ID" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column label="完成产值" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">{{ (Number(scope.row.totalCompletedValue) * 10000) / 100000000 }}万</template>
                    </el-table-column>
                    <el-table-column label="完成进度" align="center" width="120px" show-overflow-tooltip>
                        <template slot-scope="scope" >
                            <el-progress
                                :color="customColors"
                                :stroke-width="15"
                                :percentage="
                                    (Number(scope.row.totalCompletedValue * 100) / Number(scope.row.contractvalue * 10000)).toFixed(0)
                                "
                            ></el-progress>
                        </template>
                    </el-table-column>
                    <el-table-column label="时间进度" align="center" width="120px">
                        <template slot-scope="scope">
                            <el-progress v-if="(Number(scope.row.timeSchedule)-(Number(scope.row.totalCompletedValue * 100) / Number(scope.row.contractvalue * 10000))>=10)&&(Number(scope.row.timeSchedule)-(Number(scope.row.totalCompletedValue * 100) / Number(scope.row.contractvalue * 10000)).toFixed(0)<=20)" color="#FFFF00" :stroke-width="15" :percentage="scope.row.timeSchedule"></el-progress>
                             <el-progress v-else-if="(Number(scope.row.timeSchedule)-(Number(scope.row.totalCompletedValue * 100) / Number(scope.row.contractvalue * 10000))>=20)&&(Number(scope.row.timeSchedule)-(Number(scope.row.totalCompletedValue * 100) / Number(scope.row.contractvalue * 10000)).toFixed(0)<=30)" color="#FFA500" :stroke-width="15" :percentage="scope.row.timeSchedule"></el-progress>
                                <el-progress v-else-if="(Number(scope.row.timeSchedule)-(Number(scope.row.totalCompletedValue * 100) / Number(scope.row.contractvalue * 10000)).toFixed(0)>=30)" color="#D0021B" :stroke-width="15" :percentage="scope.row.timeSchedule"></el-progress>
                                <el-progress v-else color="#7ED321" :stroke-width="15" :percentage="scope.row.timeSchedule"></el-progress>
                            <!-- <el-progress :color="customColorMethod" :stroke-width="15" :percentage="(Number(scope.row.timeSchedule)-(Number(scope.row.totalCompletedValue * 100) / Number(scope.row.contractvalue * 10000))).toFixed(0)"></el-progress> -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="category" label="项目类型" :show-overflow-tooltip="true" align="center"></el-table-column>
                    <el-table-column prop="region" label="区域（省）" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column label="实施状态" width="120" align="center" v-if="types == 0 || types == 1 ">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.state" @change="selectState(scope.row)" v-if="types==0||types==1">
                                <el-option 
                                v-for="item in stateList"
                                :key="item.id"
                                :label="item.name"
                                :value ="item.id"
                                ></el-option>
                            </el-select>
                            <div v-if="types==2">
                                <p v-if="scope.row.state==1">进行中 </p>
                                <p v-if="scope.row.state==3">待验收 </p>
                                <p v-if="scope.row.state==4">停工 </p>
                                <p v-if="scope.row.state==5">已验收 </p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                            <!-- <el-button type="text" @click="handleOutput(scope.$index, scope.row)">产值信息表</el-button> -->
                            <el-button type="text" @click="handleDecompose(scope.$index, scope.row)">细化分解表</el-button>
                            <el-button type="text" v-if="types == 0 || types == 1" @click="updataStatus(scope.row)">完成</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="totalSum">
                    <span>总计：</span>
                    <div class="dataSum">
                        <div class="dataItem">
                            项目总数:
                            <span>{{projectTotal}}个</span>
                        </div>
                        <div class="dataItem">
                            合同总额:
                            <span>{{dataMessage.totalContractValue||0}}万元</span>
                        </div>
                        <div class="dataItem">
                            当月完成产值:
                            <span>{{dataMessage.monthValue||0}}万元</span>
                        </div>

                        <div class="dataItem">
                            累计完成产值:
                            <span>{{dataMessage.totalValue||0}}万元</span>
                        </div>
                        <div class="dataItem">
                            剩余合同额:
                            <span>{{dataMessage.surplusContractValue||0}}万元</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pagination">
                <el-pagination
                    background
                    layout=" prev, pager, next"
                    :current-page="query.page"
                    :page-size="pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
            <!-- 项目细化分解表 -->
            <el-dialog title="项目细化分解表" :visible.sync="decomposeVisible" width="70%" custom-class="output" :lock-scroll="false">
                <div class="selectMonthBox">
                    <!-- <button class="monthItem" @click="isChecked">全部</button> -->
                    <button
                        class="monthItem"
                        :class="{ timeChecked: isClick == index }"
                        @click="isChecked(index)"
                        v-for="(item, index) in timeList"
                        :key="index"
                    >
                        {{ item.reportTime }}
                    </button>
                </div>
                <div class="tableBox">
                    <table id="table">
                        <thead>
                            <tr>
                                <th class="tableTitle m1">序号</th>
                                <th class="tableTitle" style="width:120px">分项内容</th>
                                <th class="tableTitle">上报时间</th>
                                <!-- <th class="tableTitle">上次完成工作量</th> -->
                                <th class="tableTitle">合同单价(元)</th>
                                <!-- <th class="tableTitle">当月完成产值</th> -->
                                <!-- <th class="tableTitle">当月完成工作量</th> -->
                                <th class="tableTitle">{{ tableTitle }}</th>
                                <th class="tableTitle">{{ tableTitle1 }}</th>
                                <th class="tableTitle" style="width:150px">完成进度</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in refinement" :class="index % 2 == 0 ? 'tr1' : 'tr2'" :key="index">
                                <td style="text-align:center">{{ item.orderNo }}</td>
                                <td
                                    class="tdItem"
                                    style="white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;"
                                >
                                    {{ item.subitem }}
                                </td>
                                <td class="tdItem">{{ item.reportTime }}</td>
                                <!-- <td class="tdItem">{{ item.prevCompleted }}</td> -->
                                <td class="tdItem">{{ item.price }}</td>
                                <!-- <td class="tdItem">{{ item.monthCompletedValue }}</td> -->
                                <!-- <td class="tdItem">{{ item.monthCompleted }}</td> -->
                                <td class="tdItem" v-if="isClick == 0">{{ item.totalCompleted }}</td>
                                <td class="tdItem" v-if="isClick != 0">{{ item.monthCompleted }}</td>

                                <td class="tdItem" v-if="isClick == 0">{{ item.totalCompletedValue }}</td>
                                <td class="tdItem" v-if="isClick != 0">{{ item.monthCompletedValue }}</td>

                                <td class="tdItem tdItem1" v-if="isClick == 0">
                                    <el-progress
                                        :color="customColors"
                                        :stroke-width="15"
                                        :percentage="
                                            ((Number(item.totalCompletedValue) * 100) / Number(item.price * item.quantity)).toFixed(0)
                                        "
                                    ></el-progress>
                                </td>
                                <td class="tdItem tdItem1" v-if="isClick != 0">
                                    <el-progress
                                        :color="customColors"
                                        :stroke-width="15"
                                        :percentage="
                                            ((Number(item.monthCompletedValue) * 100) / Number(item.price * item.quantity)).toFixed(0)
                                        "
                                    ></el-progress>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="progress">
                      <span style="padding-right:64px">总进度</span>
                      <el-progress class="progress-width" :color="customColors" :stroke-width="15" :percentage="percentage.toFixed(0)"></el-progress>
                      <span v-show="showProjectMonthWorkload">总计当月完成产值：{{projectMonthWorkload|toTenThousand}}</span>
                      <span style="margin-left: 20px;">总计完成产值：{{projectBreakdownOutputValue|toTenThousand}}</span>
                    </div>
                    <div v-if="Object.keys(reportInfo).length != 0">
                        <!-- root审核 -->
                        <div class="check" v-if="types == 0 && reportInfo.deptCheck == 1">
                            <div class="division" style="border-right: 1px solid #cccccc;">
                                <p class="checkTitle">事业部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-success" style="font-size:33px;color:#07C160"></i>
                                    <p class="pass">已通过</p>
                                </div>
                                <!-- <div class="reviewBox" v-if="reportInfo.deptCheck != 0">
                                    <p>事业部审核意见:</p>
                                    <p>{{ reportInfo.deptReason }}</p>
                                </div>-->
                            </div>
                            <div class="division" style="margin-left:50px" v-if="reportInfo.pdCheck == 1">
                                <p class="checkTitle">生产运营部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-success" style="font-size:33px;color:#07C160"></i>
                                    <p class="pass">已通过</p>
                                </div>
                            </div>
                            <div class="division" style="margin-left:50px" v-else-if="reportInfo.pdCheck == 2">
                                <p class="checkTitle">生产运营部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-error" style="font-size:33px;color:red"></i>
                                    <p class="pass" style="color:red">已打回</p>
                                </div>
                            </div>
                        </div>
                        <!-- 运营部审核 -->
                        <div class="check" v-else-if="types == 1 && reportInfo.deptCheck == 1">
                            <div class="division" style="border-right: 1px solid #cccccc;">
                                <p class="checkTitle">事业部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-success" style="font-size:33px;color:#07C160"></i>
                                    <p class="pass">已通过</p>
                                </div>
                            </div>
                            <div class="division" style="margin-left:50px" v-if="reportInfo.pdCheck == 1">
                                <p class="checkTitle">生产运营部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-success" style="font-size:33px;color:#07C160"></i>
                                    <p class="pass">已通过</p>
                                </div>
                            </div>
                            <div class="division" style="margin-left:50px" v-else-if="reportInfo.pdCheck == 2">
                                <p class="checkTitle">生产运营部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-error" style="font-size:33px;color:red"></i>
                                    <p class="pass" style="color:red">已打回</p>
                                </div>
                            </div>
                        </div>
                        <!-- 事业部审核 -->
                        <div class="check" v-else-if="types == 2">
                            <div v-if="reportInfo.deptCheck == 2" class="division" style="border-right: 1px solid #cccccc;">
                                <p class="checkTitle">事业部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-error" style="font-size:33px;color:red"></i>
                                    <p class="pass" style="color:red">未通过</p>
                                </div>
                            </div>
                            <div v-else-if="reportInfo.deptCheck == 1" class="division" style="border-right: 1px solid #cccccc;">
                                <p class="checkTitle">事业部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-success" style="font-size:33px;color:#07C160"></i>
                                    <p class="pass">已通过</p>
                                </div>
                            </div>
                            <div class="division" style="margin-left:50px" v-if="reportInfo.pdCheck == 1">
                                <p class="checkTitle">生产运营部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-success" style="font-size:33px;color:#07C160"></i>
                                    <p class="pass">已通过</p>
                                </div>
                            </div>
                            <div class="division" style="margin-left:50px" v-else-if="reportInfo.pdCheck == 2">
                                <p class="checkTitle">生产运营部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-error" style="font-size:33px;color:red"></i>
                                    <p class="pass" style="color:red">已打回</p>
                                </div>
                            </div>
                        </div>
                        <!-- 意见审核 -->

                        <div v-if="types == 0 || (types == 1 && reportInfo.deptReason) || reportInfo.pdReason">
                            <div class="review1" v-if="reportInfo.deptCheck == 1 || reportInfo.pdCheck != 0">
                                <p>审核意见</p>
                                <div class="reviewBox" v-if="reportInfo.deptCheck != 0">
                                    <p>事业部审核意见:</p>
                                    <p>{{ reportInfo.deptReason }}</p>
                                </div>
                                <div style="margin-top:10px;border-top:1px solid #CCCCCC" class="reviewBox" v-if="reportInfo.pdCheck != 0">
                                    <p>生产运营部审核意见:</p>
                                    <p>{{ reportInfo.pdReason }}</p>
                                </div>
                            </div>
                        </div>
                        <div v-else-if="(types == 2 && reportInfo.deptReason) || reportInfo.pdReason">
                            <div class="review1" v-if="reportInfo.deptCheck != 0 || reportInfo.pdCheck != 0">
                                <p>审核意见</p>
                                <div class="reviewBox" v-if="reportInfo.deptCheck != 0">
                                    <p>事业部审核意见:</p>
                                    <p>{{ reportInfo.deptReason }}</p>
                                </div>
                                <div style="margin-top:10px;border-top:1px solid #CCCCCC" class="reviewBox" v-if="reportInfo.pdCheck != 0">
                                    <p>生产运营部审核意见:</p>
                                    <p>{{ reportInfo.pdReason }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="Object.keys(reportInfo).length != 0">
                    <div v-if="types == 2 && reportInfo.deptCheck == 0">
                        <div class="review">
                            <p>审核意见</p>
                            <el-input
                                type="textarea"
                                :rows="3"
                                :autosize="{ minRows: 3, maxRows: 8 }"
                                maxlength="255"
                                placeholder="请输入"
                                v-model="textarea"
                            ></el-input>
                        </div>
                        <div class="tableBtnBox">
                            <button class="btn1" @click="deptgoBack">打回</button>
                            <button class="btn2" @click="deptPass">通过</button>
                        </div>
                    </div>
                    <div v-else-if="types == 0 && reportInfo.pdCheck == 0 && reportInfo.deptCheck == 1">
                        <div class="review">
                            <p>意见审核</p>
                            <el-input
                                type="textarea"
                                :rows="3"
                                :autosize="{ minRows: 3, maxRows: 8 }"
                                maxlength="255"
                                placeholder="请输入"
                                v-model="textarea"
                            ></el-input>
                        </div>
                        <div class="tableBtnBox">
                            <button class="btn1" @click="dpgoBack">打回</button>
                            <button class="btn2" @click="dpPass">通过</button>
                        </div>
                    </div>
                    <div v-else-if="types == 1 && reportInfo.pdCheck == 0 && reportInfo.deptCheck == 1">
                        <div class="review">
                            <p>意见审核</p>
                            <el-input
                                type="textarea"
                                :rows="3"
                                :autosize="{ minRows: 3, maxRows: 8 }"
                                maxlength="255"
                                placeholder="请输入"
                                v-model="textarea"
                            ></el-input>
                        </div>
                        <div class="tableBtnBox">
                            <button class="btn1" @click="dpgoBack">打回</button>
                            <button class="btn2" @click="dpPass">通过</button>
                        </div>
                    </div>

                    <div v-else></div>
                </div>
            </el-dialog>
        </div>
        <div v-else-if="types == 3">
            <vsubmit></vsubmit>
        </div>
        <div class="popShow" :style="{ display: displayStsates }" ref="alertMsg">
            <div class="popTitle">{{ aletMsg }}</div>
        </div>
    </div>
</template>

<script>
import {
    getProjectList,
    specifyList,
    findDepList,
    dpCheck,
    deptCheck,
    resetPassword,
    findAll,
    updataProjectStatus,
    reportRecord,
    allCategory,
    projectSatus
} from '../../api/index';
import vsubmit from '../pages/doingProjectFail';
export default {
    name: 'basetable',

    data() {
        return {
            stateList:[
                {
                    name:'进行中',
                    id:1
                },{
                    name:'待验收',
                    id:3,
                },{
                    name:'停工',
                    id:4
                },{
                    name:'已验收',
                    id:5
                }
            ],

            tableTitle: '累计完成工作量',
            tableTitle1: '累计完成产值(元)',
            dataMessage: {
                totalValue: '',
                totalContractValue: '',
                surplusContractValue: '',
                monthValue: ''
            },
            category: '', //分类
            isClick: 0, //细化分解是否选中
            startTime: '',
            endTime: '',
            aletMsg: '', // 弹出框中的提示语
            displayStsates: 'none',
            value1: '',
            types: localStorage.getItem('type'),
            reportInfo: {},
            percentage: 60, //总进度
            textarea: '', //意见审核
            popstate: 0,
            outputInfo: [
                // { subitem: '张三', createTime: '2020.03.12', coefficient: 59 },
                // { subitem: '里斯', createTime: '2020.03.12', coefficient: 80 },
                // { subitem: '王五', createTime: '2020.03.12', coefficient: 92 },
                // { subitem: '王五', createTime: '2020.03.12', coefficient: 10 }
            ],
            outputInfo1: [],
            totals: '', //合同总产值
            refinement: [],
            customColors: [
                { color: '#7ED321', percentage: 60 },
                { color: '#F5A623', percentage: 90 },
                { color: '#D0021B', percentage: 100 }
            ],
          
            query: {
                state: 1,
                projectname: '',
                deptid: '',
                startdate: '',
                page: 1,
                pageIndex: 1,
                classifyId: '',
                categoryId: ''
            },
            //  querySearch: {
            //     state: 1,
            //     projectname: '',
            //     deptid: '',
            //     startdate: '',
            //     page: 1,
            //     pageIndex: 1
            // },
            tableName: '', //产值信息表名称
            tableData: [],
            tableData1: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            outputVisible: false,
            decomposeVisible: false,
            pageTotal: 0,
            pageSize: 10,
            form: {},
            idx: -1,
            id: -1,
            options: [],
            rowprojectid: '',
            depOptions: [], //事业部列表
            timeList: [
                {
                    reportTime: '总计'
                }
            ],
            params: {
                projectid: '',
                reportTime: ''
            },
            projectTotal: 0,
            projectBreakdownOutputValue: 0,
            projectMonthWorkload: 0,
            showProjectMonthWorkload: false
            // //用户搜索条件
            // querySearch: {
            //     state: 1,
            //     projectname: '',
            //     deptid: '',
            //     startdate: ''
            // }
        };
    },
    created() {
        this.getData();
        this.getDepList();
        this.getAllCategory();
    },
    filters: {
      // 转换为万元
      toTenThousand: function(value) {
        if(value > 10000) {
          return (value/10000).toFixed(2) + '万元'
        } else {
          return value.toFixed(2) + '元'
        }
      }
    },
    methods: {
        // 获取进行中项目列表
        getData() {
            if (localStorage.getItem('deptid') !== 'null') {
                this.query.deptid = localStorage.getItem('deptid');
            }
            getProjectList(this.query).then(res => {
                // console.log(res.result)
                if (res.code === 200) {
                    this.tableData = res.result.projectList;
                    this.query.page = res.result.pageInfo.current;
                    this.pageTotal = res.result.pageInfo.total;
                    this.dataMessage.monthValue = res.result.monthValue;
                    this.dataMessage.totalContractValue = res.result.totalContractValue;
                    this.dataMessage.surplusContractValue = res.result.surplusContractValue;
                    this.dataMessage.totalValue = res.result.totalValue;
                    this.projectTotal = res.result.projectNum;
                } else {
                    this.tableData = [];
                    this.query.page = 0;
                    this.pageTotal = 0;
                }
            });
        },
        getAllData() {
            findAll(this.query).then(res => {
                if (res.code === 200) {
                    this.tableData1 = res.result.projectList;
                    console.log('all' + this.tableData1);
                    this.getdaochu();
                }
            });
        },
        //获取事业部项目列表
        getDepList() {
            findDepList().then(res => {
                // console.log(res)
                if (res.code === 200) {
                    if (localStorage.getItem('deptid') !== 'null') {
                        this.depOptions = res.result.filter(res => {
                            return res.deptid == localStorage.getItem('deptid');
                        });
                        this.value1 = this.depOptions[0].deptname;
                    } else {
                        this.depOptions = res.result;
                    }
                }
            });
        },
        //格式化实施状态
        // isState(scope) {
        //     if (scope.state === 0) {
        //         return '未开始';
        //     } else if (scope.state === 1) {
        //         return '进行中';
        //     } else {
        //         return '已完成';
        //     }
        //     // return scope.state;
        // },
        //获取选中的key
        getSelectedDep(item) {
            this.query.deptid = item;
        },
        // 触发搜索按钮
        handleSearch() {
            this.query.page = 1;
            if (localStorage.getItem('deptid') !== 'null') {
                this.query.deptid = localStorage.getItem('deptid');
            }
            getProjectList(this.query).then(res => {
                if (res.code === 200) {
                    this.tableData = res.result.projectList;
                    this.query.page = res.result.pageInfo.current;
                    this.pageTotal = res.result.pageInfo.total;
                    this.dataMessage.monthValue = res.result.monthValue;
                    this.dataMessage.totalContractValue = res.result.totalContractValue;
                    this.dataMessage.surplusContractValue = res.result.surplusContractValue;
                    this.dataMessage.totalValue = res.result.totalValue;
                    this.projectTotal = res.result.projectNum;
                } else {
                    this.tableData = [];
                    this.query.page = 0;
                    this.pageTotal = 0;
                }
            });
        },

        // delAllSelection() {
        //     const length = this.multipleSelection.length;
        //     let str = '';
        //     this.delList = this.delList.concat(this.multipleSelection);
        //     for (let i = 0; i < length; i++) {
        //         str += this.multipleSelection[i].name + ' ';
        //     }
        //     this.$message.error(`删除了${str}`);
        //     this.multipleSelection = [];
        // },
        // 点击产值信息表操作
        handleOutput(index, row) {
            specifyList({ projectid: row.projectid, startTime: this.startTime, endTime: this.endTime }).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    this.rowprojectid = row.projectid;
                    this.tableName = row.projectname;
                    this.outputInfo = res.result.specifyList;
                    //    console.log(res.result.reportInfo)

                    //    console.log('reportInfo'+this.reportInfo);
                }
                console.log(res.result.specifyList);
                let a = res.result.specifyList.reduce((sum, cur) => {
                    return Number(cur.totalCompletedValue) + Number(sum);
                }, []);
                console.log(a);
                console.log(this.totals, 'total');
                this.percentage = (Number(a) / Number(this.totals)) * 100;

                console.log('percentage' + this.percentage);
                if (res.result.outputInfo != null) {
                    this.outputInfo = res.result.reportInfo;
                }
                console.log(this.outputInfo);
                this.outputVisible = true;
            });
            this.outputVisible = true;
        },
        //点击细化分解表操作
        handleDecompose(index, row) {
            this.totals = row.contractvalue * 10000;
            this.rowprojectid = row.projectid;
            this.getreportRecord();
            this.getSpecifyList();

            // this.idx = index;
            // this.form = row;
            // this.decomposeVisible = true;
        },
        //调用细化分解接口
        getSpecifyList() {
            this.params.projectid = this.rowprojectid;
            let params = this.params;
            specifyList(params).then(res => {
                if (res.code === 200) {
                  this.refinement = res.result.specifyList;
                  this.projectBreakdownOutputValue =
                    this.refinement.reduce((total,current) =>
                    total+current.totalCompletedValue, 0)
                  this.projectMonthWorkload = 
                    this.refinement.reduce((total,current) =>
                    total+current.monthCompletedValue, 0)
                }
                let a = res.result.specifyList.reduce((sum, cur) => {
                    return Number(cur.totalCompletedValue) + Number(sum);
                }, []);
                console.log(a);
                this.percentage = (a / this.totals) * 100;

                console.log('percentage' + this.percentage);
                if (res.result.reportInfo != null) {
                    this.reportInfo = res.result.reportInfo;
                }
                console.log(this.reportInfo);
                this.decomposeVisible = true;
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.query.page = val;
            this.getData();
        },
        //点击重置
        reset() {
            this.query = {
                state: 1,
                projectname: '',
                deptid: '',
                startdate: '',
                enddate: '',
                page: 1,
                pageIndex: 1,
                classifyId: '',
                categoryId: ''
            };
            this.value1 = '';
            this.category = '';
            this.getData();
        },
        //时间进度颜色
        // customColorMethod(percentage) {
        //     // console.log(percentage,index,'展示展示')
        //     if (percentage < 60) {
        //         return '#cccccc';
        //     } else if (percentage < 90) {
        //         return '#cccccc';
        //     } else {
        //         return '#cccccc';
        //     }
        // },
        // //事业部点击打回
        deptgoBack() {
            let checkForm = {
                projectid: this.rowprojectid,
                state: 2,
                reason: this.textarea
            };
            if (this.textarea) {
                deptCheck(checkForm).then(res => {
                    if (res.code == 200) {
                        this.aletMsg = '已打回至项目部';
                        this.alertDia(this.aletMsg);
                    } else {
                        this.$message.error(res.message);
                    }
                });
                this.decomposeVisible = false;
            } else {
                this.$message.error('请输入审核意见');
            }
        },
        //事业部点击通过
        deptPass() {
            let checkForm = {
                projectid: this.rowprojectid,
                state: 1,
                reason: this.textarea
            };
            deptCheck(checkForm).then(res => {
                if (res.code == 200) {
                    this.aletMsg = '事业部审核通过';
                    this.alertDia(this.aletMsg);
                }
            });
            this.decomposeVisible = false;
        },
        //运营部点击打回
        dpgoBack() {
            // this.$message('已打回');
            // this.decomposeVisible = false;
            if (this.textarea) {
                let checkForm = {
                    projectid: this.rowprojectid,
                    state: 2,
                    reason: this.textarea
                };
                dpCheck(checkForm).then(res => {
                    if (res.code == 200) {
                        this.aletMsg = '已打回至项目部';
                        this.alertDia(this.aletMsg);
                    } else {
                        this.$message.error(res.message);
                    }

                    this.decomposeVisible = false;
                });
            } else {
                this.$message.error('请输入审核意见');
            }
        },
        //点击通过
        dpPass() {
            let checkForm = {
                projectid: this.rowprojectid,
                state: 1,
                reason: this.textarea
            };
            dpCheck(checkForm).then(res => {
                if (res.code == 200) {
                    this.aletMsg = '已保存进度';
                    this.alertDia(this.aletMsg);
                } else {
                    this.$message.error(res.message);
                }
                this.decomposeVisible = false;

                this.getData();
            });

            // this.$message.success('已通过');
            // this.decomposeVisible = false;
        },
        //点击导出
        tableToExcel() {
            //列标题
            this.getAllData();
        },
        //导出数据
        getdaochu() {
            this.tableData1.filter((item, index) => {
                item.id = index + 1;
                item.state = '进行中';
                item.period = item.period + '个月';
                item.deptid = `"${item.proSpecifyList.join(`\r\n`)}"`;
                item.reportstate = (Number(item.totalCompletedValue) / (Number(item.contractvalue) * 100)).toFixed(0) + '%';
                item.contractvalue = item.contractvalue + '万';
                item.reportday = (item.totalCompletedValue / 10000).toFixed(2) + '万';
                item.totalCompletedValue = '';
                item.proSpecifyList = '';
                item.timeSchedule ='';
                // item.coefficient =0.2
                // Object.keys(item).forEach(key=>{
                //     if(!item[key]&&item[key]!==0){
                //         state=false
                //         return state
                //     }
                // })
            });
            console.log('tabData1' + this.tableData1);
            // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
            let str = `序号,项目ID,项目名称,合同总产值,所属事业部,开工时间,工期,关联用户ID,区域(省),实施状态,项目类型,完成产值,完成进度,分项信息\n`;
            //增加\t为了不让表格显示科学计数法或者其他格式
            for (let i = 0; i < this.tableData1.length; i++) {
                for (let item in this.tableData1[i]) {
                    str += `${this.tableData1[i][item] + '\t'},`;
                }
                str += '\n';
            }
            //encodeURIComponent解决中文乱码
            let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
            //通过创建a标签实现
            let link = document.createElement('a');
            link.href = uri;
            //对下载的文件命名
            link.download = '进行中的项目数据表.csv';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },
        //重置密码
        resetPassWord(scope) {
            this.$confirm('是否确认恢复默认密码"123456"？', {
                customClass: 'newObjectConfirm',
                center: true,
                showClose: false,
                cancelButtonClass: 'newObjectCancel',
                confirmButtonClass: 'newObjectConfirm'
            })
                .then(() => {
                    resetPassword({ username: scope.deptid }).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '重置成功'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '重置失败'
                            });
                        }
                    });
                })
                .catch(() => {});
        },

        //修改项目状态
        updataStatus(scope) {
            this.$confirm('是否确定结束项目', {
                customClass: 'newObjectConfirm',
                center: true,
                showClose: false,
                cancelButtonClass: 'newObjectCancel',
                confirmButtonClass: 'newObjectConfirm'
            })
                .then(() => {
                    updataProjectStatus({ projectid: scope.projectid, state: 2 }).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '结束项目成功'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '结束项目失败'
                            });
                        }
                        this.getData();
                    });
                })
                .catch(() => {});
        },
        alertDia(msg) {
            this.displayStsates = 'block';
            this.aletMsg = msg;
            // 延迟2秒后消失 自己可以更改时间
            window.setTimeout(() => {
                this.displayStsates = 'none';
            }, 2000);
        },
        selectStartTime() {
            let num1 = this.startTime.replace(/[^0-9]/gi, '');
            let num2 = this.endTime.replace(/[^0-9]/gi, '');
            if (num1 != '' && num2 != '') {
                if (Number(num1) > Number(num2)) {
                    this.$message.warning('起始时间不能大于截止时间');
                    this.startTime = '';
                    this.endTime = '';
                }
            }
            console.log(num1);
            let param = {
                projectid: this.rowprojectid,
                startTime: this.startTime,
                endTime: this.endTime
            };
            specifyList(param).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    // this.rowprojectid = row.projectid;
                    this.outputInfo = res.result.specifyList;
                    //    console.log(res.result.reportInfo)

                    //    console.log('reportInfo'+this.reportInfo);
                }
                // console.log(res.result.specifyList);
                let a = res.result.specifyList.reduce((sum, cur) => {
                    return Number(cur.totalCompletedValue) + Number(sum);
                }, []);
                console.log(a);
                this.percentage = (a / this.totals) * 100;

                console.log('percentage' + this.percentage);
                if (res.result.outputInfo != null) {
                    this.outputInfo = res.result.reportInfo;
                }
                console.log(this.outputInfo);
                this.outputVisible = true;
            });
        },
        selectEndTime() {
            let num1 = this.startTime.replace(/[^0-9]/gi, '');
            let num2 = this.endTime.replace(/[^0-9]/gi, '');
            if (num1 != '' && num2 != '') {
                if (Number(num1) > Number(num2)) {
                    this.$message.warning('截止时间不能小于起始时间');
                    this.startTime = '';
                    this.endTime = '';
                }
            }
            //  console.log(this.startTime,this.endTime)
            let param = {
                projectid: this.rowprojectid,
                startTime: this.startTime,
                endTime: this.endTime
            };
            specifyList(param).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    // this.rowprojectid = row.projectid;
                    this.outputInfo = res.result.specifyList;
                    //    console.log(res.result.reportInfo)

                    //    console.log('reportInfo'+this.reportInfo);
                }
                // console.log(res.result.specifyList);
                let a = res.result.specifyList.reduce((sum, cur) => {
                    return Number(cur.totalCompletedValue) + Number(sum);
                }, []);
                console.log(a);
                this.percentage = (a / this.totals) * 100;

                console.log('percentage' + this.percentage);
                if (res.result.outputInfo != null) {
                    this.outputInfo = res.result.reportInfo;
                }
                console.log(this.outputInfo);
                this.outputVisible = true;
            });
        },
        //产值信息表点击导出
        daochuBtn() {
            this.getcanzhiData();
            // this.getcanzhiDaochu();
        },
        getcanzhiData() {
            let param = {
                projectid: this.rowprojectid,
                startTime: this.startTime,
                endTime: this.endTime
            };
            specifyList(param).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    // this.rowprojectid = row.projectid;
                    this.outputInfo1 = res.result.specifyList;
                    //    console.log(res.result.reportInfo)

                    //    console.log('reportInfo'+this.reportInfo);
                    this.getcanzhiDaochu();
                }
            });
        },
        getcanzhiDaochu() {
            this.outputInfo1.filter((item, index) => {
                item.id = index + 1;
                item.orderNo = item.subitem;
                item.subitem = item.reportTime;
                item.quantity = ((item.calcCompletedValue * 100) / (item.price * item.quantity)).toFixed(0) + '%';
                item.coefficient = '';
                item.monthCompleted = '';
                item.monthCompletedValue = '';
                item.calcCompleted = '';
                item.prevCompleted = '';
                item.price = '';
                item.reportTime = '';
                item.reportnums = '';
                item.totalCompleted = '';
                item.totalCompletedValue = '';
                item.calcCompletedValue = '';
                // item.deptid = '';
                // item.reportstate = '';
                // item.reportday = '';

                // item.coefficient =0.2
                // Object.keys(item).forEach(key=>{
                //     if(!item[key]&&item[key]!==0){
                //         state=false
                //         return state
                //     }
                // })
            });
            console.log('outputInfo1' + JSON.stringify(this.outputInfo1));
            // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
            let str = `序号,分项内容,上报时间,完成进度\n`;
            //增加\t为了不让表格显示科学计数法或者其他格式
            for (let i = 0; i < this.outputInfo1.length; i++) {
                for (let item in this.outputInfo1[i]) {
                    str += `${this.outputInfo1[i][item] + '\t'},`;
                }
                str += '\n';
            }
            //encodeURIComponent解决中文乱码
            let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
            //通过创建a标签实现
            let link = document.createElement('a');
            link.href = uri;
            //对下载的文件命名
            link.download = `${this.tableName}产值信息表.csv`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },
        //取所有项目的分类
        getAllCategory() {
            allCategory({}).then(res => {
                if (res.code == 200) {
                    this.options = res.result.classifyList;
                    this.options.filter((item, index) => {
                        item.value = item.id;
                        item.label = item.name;
                        item.children = item.categoryList;
                        item.children.filter((item, index) => {
                            item.value = item.id;
                            item.label = item.name;
                        });
                    });

                    console.log(this.options);
                } else {
                    this.$message.error(message);
                }
            });
        },
        //细化分解获取项目汇报记录
        getreportRecord() {
            this.timeList = [{ reportTime: '总计' }];
            let param = {
                projectid: this.rowprojectid
            };
            reportRecord(param).then(res => {
                if (res.code == 200) {
                    this.timeList = this.timeList.concat(res.result.timeList);
                    console.log(this.timeList);
                }
            });
        },
        //点击细化分解选择时间
        isChecked(index) {
            this.isClick = index;
            console.log(index);
            if (index == 0) {
                this.params.reportTime = '';
                this.tableTitle = '累计完成工作量';
                this.tableTitle1 = '累计完成产值(元)';
                this.showProjectMonthWorkload = false
            } else {
                this.params.reportTime = this.timeList[index].reportTime;
                this.tableTitle = '当月完成工作量';
                this.tableTitle1 = '当月完成产值(元)';
                this.showProjectMonthWorkload = true
            }
            this.getSpecifyList();
        },
        //点击项目类型
        handleChange(value) {
            (this.query.classifyId = value[0]), (this.query.categoryId = value[1]);
            console.log(value);
        },
        //点击选择状态
        selectState(row){
            console.log(row)
            let params = {
                projectid:row.projectid,
                state:row.state
            }

            console.log(params)
            projectSatus(params).then(res=>{
                this.$message.success('状态修改成功')
            })
        }
    },
    components: { vsubmit }
};
</script>

<style scoped lang="scss">
.handle-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.title {
    height: 28px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin-right: 40px;
    min-width: 120px;
}
.titleBtn {
    background: rgba(33, 74, 143, 1);
    color: #fff;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    height: 35px;
}
.titleBtn1 {
    background: rgba(0, 79, 171, 0.2);
    color: rgba(0, 79, 171, 1);
    border: none;
    font-size: 16px;
    border-radius: 5px;
    height: 35px;
}
.handle-box .name {
    margin-right: 10px;
}
.mr0 {
    font-size: 14px;
    min-width: 230px;
}

.mr20 {
    font-size: 14px;
    // margin-right: 8px;
    min-width: 221px;
}
.handle-select {
    width: 140px;
}
.searchBox {
    min-width: 244px;
    margin-left: auto;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.block {
    margin-bottom: 10px;
}
.table {
    width: 100%;
    font-size: 14px;
}
.title {
    float: left;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

/* 产值信息表样式 */
.tableTitle {
    background: rgba(184, 216, 255, 0.2);
    border: 1px solid rgba(184, 216, 255, 1);
    margin: 0;
    min-width: 80px;
    height: 40px;
}
.newObjectList >>> .el-dialog__body {
    padding: 0 20px 30px 30px;
}
.tr1 {
    height: 44px;
}
.tr2 {
    height: 44px;
    background: rgba(184, 216, 255, 0.05);
}
#table {
    width: 100%;
    border-collapse: collapse;
}
#table td {
    border: 1px solid rgba(184, 216, 255, 1);
}
.tdItem {
    text-align: center;

    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    height: 40px;
    // white-space: nowrap;
    // overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.tableBox {
    min-height: 300px;
}
.doingObject/deep/.el-dialog__body {
    max-height: 600px;
    overflow-y: scroll;
}
.progress {
    width: 100%;
    border: 1px solid rgba(184, 216, 255, 1);
    border-top: none;
    box-sizing: border-box;
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    .progress-width {
      width: 300px;
    }
}
.check {
    margin-top: 20px;
    display: flex;
    .division {
        // width: 100px;

        .checkTitle {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            margin-bottom: 24px;
            color: rgba(153, 153, 153, 1);
            line-height: 22px;
        }
        .ispass {
            display: flex;
            align-items: center;
            .pass {
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(7, 193, 96, 1);
                padding-right: 37px;
                padding-left: 14px;
            }
        }
    }
}
.review {
    margin-top: 20px;
    p {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-bottom: 10px;
    }
}
.review1 {
    margin-top: 20px;
    p {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-bottom: 10px;
    }
}
.reviewBox {
    padding: 24px 0 10px 0;
    margin-right: 20px;
    display: flex;
    p:nth-child(1) {
        min-width: 182px;
        margin-right: 37px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 25px;
    }
    p:nth-child(2) {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 25px;
        // width: 1000px;
    }
}
.tableBtnBox {
    margin-top: 30px;
    text-align: center;
    .btn1 {
        width: 90px;
        height: 35px;
        background: rgba(0, 79, 171, 0.2);
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 79, 171, 1);
        margin-right: 56px;
    }
    .btn2 {
        width: 90px;
        height: 35px;
        background: rgba(0, 79, 171, 1);
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
}
.tdItem1 {
    width: 140px;
    padding: 0 0 0 10px;
    text-align: left;
    // white-space: break-word;
    box-sizing: border-box;
}
.popShow {
    width: 387px;
    height: 50px;
    background: rgba(51, 51, 51, 1);
    border-radius: 30px;
    opacity: 0.8;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 9999;
}
.popTitle {
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
}
.handle-box /deep/.el-input--small .el-input__inner {
    height: 35px;
}
.tdItem/deep/.el-progress-bar__outer {
    width: 94px;
}
.progress/deep/.el-progress__text {
    margin-left: 22px !important;
}
.el-progress {
    display: flex;
    align-items: center;
}
//时间选择
.demonstration {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 24px;
    margin-right: 10px;
}
.el-date-editor {
    width: 140px;
    margin-right: 15px;
}
.daochuBtn {
    background: rgba(0, 79, 171, 0.2);
    color: rgba(0, 79, 171, 1);
    border: none;
    font-size: 16px;
    border-radius: 5px;
    height: 35px;
    width: 90px;
}
.progress/deep/.el-progress__text {
    width: 100% !important;
}
.selectMonthBox {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #004fab;
    margin-bottom: 30px;
    padding-left: 50px;
    box-sizing: border-box;
    flex-wrap: wrap;
    .monthItem {
        margin-top: 5px;
        width: 93px;
        height: 35px;
        background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        border: 1px solid rgba(198, 203, 212, 1);
        text-align: center;
        margin-right: 15px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
    }
}
.timeChecked {
    background: rgba(0, 79, 171, 1) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 79, 171, 1) !important;
}
.totalSum {
    border-left: 1px solid rgba(184, 216, 255, 1);
    border-right: 1px solid rgba(184, 216, 255, 1);
    border-bottom: 1px solid rgba(184, 216, 255, 1);
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    .dataSum {
        // border-left:1px solid rgba(184,216,255,1);
        display: flex;
        justify-content: space-around;
        .dataItem {
            padding-left: 50px;
        }
    }
}
</style>
